<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <div id="box" class="div1" asd="1902" data-id="a001">1231231231</div>
        <ul>
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
        </ul>
    <script>

    // nodeName、nodeType、nodeValue、attributes(该节点的属性集合)
    //    var box=document.getElementById("box")
    //    console.log(box.nodeName)//div
    //    console.log(box.nodeType)//1
    //    console.log(box.nodevalue)//undefined 一般用于属性节点和文本节点
       
    //    console.log(box.attributes[0])//id="box"
    //    console.log(box.attributes[0].nodeName)//id
    //    console.log(box.attributes[0].nodeType)//2
    //    console.log(box.attributes[0].nodeValue)//box
 
    // 获取元素节点 
    // getElementById(只有document可以用，document可以使用所有的获取方法)
    // getElementsByClassName(ie8以下有兼容问题)
    // getElementsByTagName
    // getElementsByName(一般用于表单元素)

    // 获取元素节点
    // ele.getAttribute("name")

    // 设置属性节点
    // ulBox.setAttribute("www", "我是谁,我在哪,我在看什么？");

     // 删除属性节点
    // ulBox.removeAttribute("www");
    // ulBox.removeAttribute("data-id");

    // getelmentsclassname方法的封装
    function getElementsByClassName(name) {  //第一版
        // 
        var allList = document.getElementsByTagName("*"); //获取页面所有的元素节点
        var arr = [];
        for (var i = 0; i < allList.length; i++) { //遍历allList
            var ele = allList[i];  //每一个元素
            if (ele.getAttribute("class")) {
                var classList = ele.getAttribute("class").split(" ");// "wrap one two"  拆分为数组
                if (indexOf(classList, name) != -1) {  //找到class 包含 name的元素
                    arr.push(ele);
                }
            }
        }
        return arr;
    }
    
    // indexof方法的封装
    function indexOf(list, item) {
        var index = -1;
        for (var i = 0; i < list.length; i++) {
            var each = list[i];
            if (item === each) {
                index = i;
                break;
            }
        }
        return index;
    }

    </script>
</body>
</html>